<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
    <ul id="books"></ul>
    <script>
        // fetch 可以主动拉取后端 的数据
        // 前后端 分离 前端就起来了
        // fetch 以前是怎么通信的
        // 主动的拉取数据
        let xmlhttp = new XMLHttpRequest(); // 由微软发明的
        console.log(xmlhttp.readyState,'===');
        xmlhttp.open('GET',"http://localhost:3000/publisher",true);
        // http 花时间 异步
        console.log(xmlhttp.readyState,'===');
        xmlhttp.send();
        // 监听对象的状态改变
        xmlhttp.onreadystatechange = function(){
            console.log(xmlhttp.readyState);
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                console.log(xmlhttp.responseText);
                const books=JSON.parse(xmlhttp.responseText);
                document.getElementById('books')
                .innerHTML=books.map(book=>`
                    <li>
                        ID:${book.id},
                        Name:${book.name}
                    </li>
                `).join('')
            }
        }

    </script>
</body>
</html>